<template>
    <div>
        <Form ref="EditForm" :model="formData" label-position="top">
            <Row :gutter="16">

                <Col :xs="24" :md="24">
                    <FormItem label="模块名称" prop="sm_name" :rules="{required: true, message:'不能为空', trigger: 'blur'}">
                        <Input  v-model="formData.sm_name"></Input>
                    </FormItem>
                </Col>

                <Col :xs="24" :md="24">
                    <FormItem label="使用的模版" prop="sm_viewPath" :rules="{required: true, message:'不能为空', trigger: 'blur'}">
                        <FileSelect v-model="formData.sm_viewPath" path="/areas/home/static/template/default/views" split="/" ext="marko"></FileSelect>
                    </FormItem>
                </Col>

                <Col :xs="24" :md="24">
                    <FormItem label="Url地址" prop="sm_url" :rules="{required: true, message:'不能为空', trigger: 'blur'}">
                        <Input  v-model="formData.sm_url"></Input>
                        <div style="color:#c0c0c0">定义访问此模块的url地址</div>
                    </FormItem>
                </Col>
                <Divider>SEO设置</Divider>
                <Col :xs="24" :md="24">
                    <FormItem label="页面标题" prop="sm_pageTitle" :rules="{required: true, message:'不能为空', trigger: 'blur'}">
                        <Input  v-model="formData.sm_pageTitle"></Input>
                    </FormItem>
                </Col>

                <Col :xs="24" :md="24">
                    <FormItem label="关键字" prop="sm_keyWord" :rules="{required: false, message:'不能为空', trigger: 'blur'}">
                        <Input  v-model="formData.sm_keyWord"></Input>
                        <div style="color:#c0c0c0">多个关键词请用","隔开</div>
                    </FormItem>
                </Col>


                <Col :xs="24" :md="24">
                    <FormItem label="简短描述" prop="sm_remark" :rules="{required: false, message:'不能为空', trigger: 'blur'}">
                        <Input type="textarea" v-model="formData.sm_remark" :autosize="{minRows: 2,maxRows: 5}"></Input>
                        <div style="color:#c0c0c0">呈现在搜索引擎页面中页面描述</div>
                    </FormItem>
                </Col>

            </Row>
            <Row>
                <Col>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit()">提交</Button>
                        <Button @click="handleReset()" style="margin-left: 8px">重置</Button>
                    </FormItem>
                </Col>
            </Row>


        </Form>


    </div>
</template>

<script>

    import AppFrame from '../../../libs/app-frame';
    import FileSelect from '../../../components/file-select';
    export default {
        components:{
            FileSelect
        },
        data: function() {
            return {
                state: { //数据加载状态
                    isLoadingData: false,
                    isChangeData: false
                },

                formData: {
                    sm_name:'',
                    sm_viewPath:'',
                    sm_remark:'',
                    sm_url:''
                },
                query: {}
            }
        },
        created: function() {
            this.query = this.$route.query;
            this.getFormData();
        },
        methods: {
            getFormData() {
                let self = this;
                self.state.isLoadingData = true;
                let postData = {
                    id: self.query.id || '',
                };
                AppFrame.Http.Post("/manage-api/cms/site-module/getItem", postData).then(function(Ret) {
                    if (Ret.Result === 1 && Ret.Data) {
                        self.formData=Ret.Data;
                    }
                }).catch(function(err) {
                    this.$Message.error(JSON.stringify(err));
                });
            },
            handleSubmit() {
                let self = this;
                this.$refs["EditForm"].validate((valid) => {
                    if (valid) {
                        AppFrame.Http.Post("/manage-api/cms/site-module/edit", self.formData, function(err, ret) {
                            if (ret && ret.Result === 1) {
                                self.$Message.success('保存成功');
                                self.$router.go(-1);
                            } else {
                                self.$Message.error(ret.Msg);
                            }
                        })
                    }
                });
            },
            handleReset() {
                this.$refs["EditForm"].resetFields();
            },
        }
    }
</script>

<style scoped>

</style>
